<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端加速器测试</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .test-area {
            background: white;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .instructions {
            background: #f0f8ff;
            padding: 15px;
            border-left: 4px solid #007bff;
            margin-bottom: 20px;
        }
        
        .test-button {
            background: #007bff;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            margin: 10px;
        }
        
        .test-button:hover {
            background: #0056b3;
        }
        
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            font-weight: bold;
        }
        
        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .status.info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
    </style>
</head>
<body>
    <div class="test-area">
        <h1>🚀 移动端加速器测试页面</h1>
        
        <div class="instructions">
            <h3>📱 测试步骤：</h3>
            <ol>
                <li>在Edge浏览器中按F12打开开发者工具</li>
                <li>点击设备仿真按钮切换到手机模式</li>
                <li>点击下方的"展开加速器"按钮</li>
                <li>点击页面其他区域，观察加速器是否关闭</li>
                <li>重复步骤3-4，测试多次展开关闭</li>
            </ol>
        </div>
        
        <div id="status" class="status info">
            状态：等待测试开始...
        </div>
        
        <button class="test-button" onclick="testSpeedPanel()">🎯 展开加速器面板</button>
        <button class="test-button" onclick="clearStatus()">🧹 清除状态</button>
        <button class="test-button" onclick="showDebugInfo()">🔍 显示调试信息</button>
        
        <div class="test-area">
            <h3>🎮 模拟游戏区域</h3>
            <p>这里模拟游戏的主要内容区域。点击这里应该能关闭加速器面板。</p>
            <div style="height: 200px; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; font-weight: bold;">
                🎯 点击这里测试关闭功能
            </div>
        </div>
        
        <div id="debug-info" style="display: none;" class="test-area">
            <h3>🔧 调试信息</h3>
            <div id="debug-content"></div>
        </div>
    </div>

    <!-- 加载加速器脚本 -->
    <script src="https://speed.imxz.cn:8181/speed.js"></script>
    
    <script>
        let testCount = 0;
        
        function updateStatus(message, type = 'info') {
            const statusEl = document.getElementById('status');
            statusEl.textContent = message;
            statusEl.className = `status ${type}`;
        }
        
        function testSpeedPanel() {
            testCount++;
            updateStatus(`第 ${testCount} 次测试：尝试展开加速器面板...`, 'info');
            
            // 模拟点击加速器展开按钮
            const speedButton = document.querySelector('[id*="d3j4a5s8d3"]');
            if (speedButton) {
                speedButton.click();
                setTimeout(() => {
                    const panel = document.querySelector('.d3j4a5s8d0-show');
                    if (panel) {
                        updateStatus(`✅ 第 ${testCount} 次测试：加速器面板已展开，现在点击其他区域测试关闭功能`, 'success');
                    } else {
                        updateStatus(`❌ 第 ${testCount} 次测试：加速器面板未能展开`, 'error');
                    }
                }, 100);
            } else {
                updateStatus(`❌ 第 ${testCount} 次测试：未找到加速器按钮`, 'error');
            }
        }
        
        function clearStatus() {
            updateStatus('状态已清除，等待新的测试...', 'info');
            testCount = 0;
        }
        
        function showDebugInfo() {
            const debugDiv = document.getElementById('debug-info');
            const debugContent = document.getElementById('debug-content');
            
            debugDiv.style.display = debugDiv.style.display === 'none' ? 'block' : 'none';
            
            if (debugDiv.style.display === 'block') {
                const speedPanel = document.querySelector('[id*="d3j4a5s8d3"]');
                const showPanel = document.querySelector('.d3j4a5s8d0-show');
                
                debugContent.innerHTML = `
                    <p><strong>用户代理：</strong> ${navigator.userAgent}</p>
                    <p><strong>视口大小：</strong> ${window.innerWidth} x ${window.innerHeight}</p>
                    <p><strong>设备像素比：</strong> ${window.devicePixelRatio}</p>
                    <p><strong>触摸支持：</strong> ${'ontouchstart' in window ? '是' : '否'}</p>
                    <p><strong>加速器元素：</strong> ${speedPanel ? '已找到' : '未找到'}</p>
                    <p><strong>面板状态：</strong> ${showPanel ? '已展开' : '已关闭'}</p>
                    <p><strong>测试次数：</strong> ${testCount}</p>
                `;
            }
        }
        
        // 监听点击事件来检测关闭功能
        document.addEventListener('click', function(e) {
            const panel = document.querySelector('.d3j4a5s8d0-show');
            if (panel && !panel.contains(e.target)) {
                setTimeout(() => {
                    const panelAfter = document.querySelector('.d3j4a5s8d0-show');
                    if (!panelAfter) {
                        updateStatus(`✅ 点击外部关闭功能正常工作！`, 'success');
                    }
                }, 50);
            }
        });
        
        // 页面加载完成后的初始化
        window.addEventListener('load', function() {
            updateStatus('页面加载完成，加速器脚本已加载', 'success');
        });
    </script>
</body>
</html>
